<template>
  <!-- 修改密码 -->
  <view class="edit_password_page">
    <nav-bar></nav-bar>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <view class="title">修改密码</view>
    <view class="input">
      <input type="password" v-model="oldPwd" placeholder="请输入旧密码" />
    </view>
    <view class="input">
      <input type="password" v-model="newPwd" placeholder="请输入新密码" />
    </view>
    <view class="input">
      <input type="password" v-model="surePwd" placeholder="请确认新密码" />
    </view>
    <view class="btn_box">
      <button @click="onConfirm">确认</button>
    </view>
  </view>
</template>

<script>
import md5 from "@/plugins/md5";
import { mapState, mapMutations } from "vuex";
var clear;
export default {
  data() {
    return {
      // 旧的密码
      oldPwd: "",
      // 新密码
      newPwd: "",
      // 确认新密码
      surePwd: ""
    };
  },
  //第一次加载
  onLoad(e) {},
  //页面显示
  onShow() {},
  //方法
  methods: {
    ...mapMutations(["emptyUserInfo"]),
    onConfirm() {
      if (this.oldPwd == "") {
        uni.showToast({
          title: "请输入原密码",
          icon: "none"
        });
        return;
      }
      if (this.newPwd == "") {
        uni.showToast({
          title: "请输入新密码",
          icon: "none"
        });
        return;
      }
      if (this.surePwd == "") {
        uni.showToast({
          title: "请输入确认密码",
          icon: "none"
        });
        return;
      }
      if (this.newPwd !== this.surePwd) {
        uni.showToast({
          title: "两次密码不一致",
          icon: "none"
        });
        return;
      }

      this.$http
        .post("api/mime/v1/edit_password", {
          oldPassword: md5(this.oldPwd),
          newPassword: md5(this.newPwd)
        })
        .then(res => {
          this.emptyUserInfo();
          uni.showToast({
            title: "密码修改成功",
            icon: "success",
            success() {
              uni.redirectTo({
                url: "/pages/user/login"
              });
            }
          });
        });
    }
  },
  //页面隐藏
  onHide() {},
  //页面卸载
  onUnload() {},
  //页面下来刷新
  onPullDownRefresh() {},
  //页面上拉触底
  onReachBottom() {},
  //用户点击分享
  onShareAppMessage(e) {
    return this.wxShare();
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";
.edit_password_page {
  height: 100vh;
  background-color: #fff;
  padding: 50rpx 40rpx 0;
  .title {
    padding: 60rpx 60rpx 88rpx;
    font-size: 60rpx;
    color: #333333;
  }
  .input {
    margin: 0 60rpx 50rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #efefef;
    > input {
      &::placeholder {
        font-size: 30rpx;
        color: #999999;
      }
    }
  }
  .btn_box {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 447rpx;
    margin: 0 95rpx 0;
    > button {
      width: 100%;
      height: 86rpx;
      background-color: $themeColor;
      background-blend-mode: normal, normal;
      border-radius: 43rpx;
      color: #ffffff;
      line-height: 86rpx;
    }
  }
}
</style>
